<template>
 <view >
  <view class="productList" ref="container">
    <form @submit.prevent="submitForm">
      <view class="search bg-color-red  acea-row row-between-wrapper">
        <view class="input acea-row row-between-wrapper">
          <input placeholder="搜索商家信息"   v-model="merchatName"/>
          <text class="iconfont icon-sousuo" @click="submitForm"></text>
        </view>
    <!--    <view
          class="iconfont"
          :class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'"
          @click="switchTap"
        ></view> -->
      </view>
    </form>
	  </view>  
	  
	  
    <view class="storeBox"   ref="container">
      <view
        class="storeBox-box"
        v-for="(item, index) in storeList"
        :key="index"
        @click="goShopAllList(item.id,item.merchantName)"
      >
        <view class="store-img">
          <img :src="item.logoUrl" lazy-load="true" />
        </view>
        <view class="store-cent-left">
          <text class="store-name">{{ item.merchantName }}</text>
          <text class="store-address line1">{{ item.address }}</text>
        </view>
        <view class="row-right">
          <view>
           <!-- <a class="store-phone" @click="telPhone(item.phone)">
              <text class="iconfont icon-dadianhua01"></text>
            </a> -->
			<a >
			  <text class="store-address">全部商品></text>
			</a>
          </view>
     <!--     <view class="store-distance" @click="showMaoLocation(item)">
            <text class="addressTxt" v-if="item.distance">距离{{ item.distance }}千米</text>
            <text class="addressTxt" v-else>查看地图</text>
            <text class="iconfont icon-youjian"></text>
          </view> -->
        </view>
      </view>
	  
	  
	  <view v-if="storeList.length==0" style="text-align: center;padding-top: 100rpx;color: gray;"> 未搜索到</view>
	  
      <Loading :loaded="loaded" :loading="loading"></Loading>
    </view>
  </view>
</template>

<script>
import Loading from "@/components/Loading";
import { merchantList } from "@/api/store";
 
export default {
  name: "storeList",
  components: { Loading }, 
  data() {
    return {
      page: 1,
      limit: 20,
      loaded: false,
      loading: false,
      storeList: [],
      mapShow: false,
      system_store: {}, 
      locationShow: false,
	  merchatName:''
    };
  },
  mounted() {
	  this.merchatName = this.$yroute.query.search||'';
    this.getList();
  },
  onReachBottom() {
    !this.loading && this.getList();
  },
  methods: {
    // showMaoLocation(data) {
    //   this.$yrouter.push({
    //     path: "/pages/map/index",
    //     query: data
    //   });
    // },
    // 选中门店
    // checked(e) {
    //   if (this.goName === "orders") {
    //     this.$store.commit("get_store", e);
    //     this.$yrouter.back();
    //   }
    // },
    //拨打电话
    // telPhone(phoneNumber) {
    //   uni.makePhoneCall({
    //     phoneNumber: phoneNumber,
    //     fail() {
    //       console.log("取消拨打");
    //     }
    //   });
    // },
	
	
	submitForm: function () {
	 
	  this.$set(this, "storeList", []);
	  this.page = 1;
	  this.loadend = false;
	  this.loading = false;
	  this.loaded = false;
	  this.getList();
	},
	
	goShopAllList(merId,merchantName){ //进入商户全部商品列表
	 
		this.$yrouter.push({
		  path: "/pages/shop/GoodsList/index",
		  query:{
			  merId,
			  merchantName
		  }
		});
	},
	
	
    // 获取门店列表数据
    getList: function() {
	//	alert(this.$route.query.merId);
	 
      if (this.loading || this.loaded) return;
      this.loading = true;
      let data = {
        // latitude: this.location.latitude, //纬度
        // longitude: this.location.longitude, //经度
        page: this.page,
        limit: this.limit,
		merId: this.$route.query.merId ||"",
		merName: this.merchatName
      };
 
      merchantList(data)
        .then(res => {
          this.loading = false;
          this.loaded = res.data.length < this.limit;
          this.storeList.push.apply(this.storeList, res.data);
          this.page = this.page + 1;
          // this.mapKey = res.data.mapKey;
        })
        .catch(err => {
          uni.showToast({
					title: err.msg,
					icon: "none",
					duration: 2000,
				});
        });
    }
  }
};
</script>
 

<style scoped lang="less">
	
.noCommodity {
  border-top: 3px solid #f5f5f5;
  padding-bottom: 1px;
}	
	
	
.geoPage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10000;
}
.storeBox {
  // background-color: #fff;
  padding: 0 0.3 * 100rpx;
  margin-top: 100rpx;
}
.storeBox-box {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  padding: 0.23 * 100rpx 0;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}
.store-cent {
  display: flex;
  align-items: center;
  width: 80%;
}
.store-cent-left {
  width: 45%;
  text {
    display: block;
  }
}
.store-img {
  width: 1.2 * 100rpx;
  height: 1.2 * 100rpx;
  border-radius: 0.06 * 100rpx;
  margin-right: 0.22 * 100rpx;
}
.store-img img {
  width: 100%;
  height: 100%;
}
.store-name {
  color: #282828;
  font-size: 0.3 * 100rpx;
  margin-bottom: 0.22 * 100rpx;
  font-weight: 800;
}
.store-address {
  color: #666666;
  font-size: 0.24 * 100rpx;
}
.store-phone {
  width: 0.5 * 100rpx;
  height: 0.5 * 100rpx;
  color: #fff;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 0.5 * 100rpx;
  background-color: #e83323;
  margin-bottom: 0.22 * 100rpx;
}
.store-distance {
  font-size: 0.22 * 100rpx;
  color: #e83323;
}
.iconfont {
  font-size: 0.2 * 100rpx;
}
.row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 33.5%;
}
</style>
